import 'package:app_health/pages/login/LoginPage.dart';
import 'package:app_health/pages/regist/SexPage.dart';
import 'package:flutter/material.dart';

class RegistPage extends StatelessWidget {
  //留作备用，可以设置左图标
//  leading: Builder(builder: (BuildContext context) {
//  return IconButton(
//  icon: const Icon(Icons.arrow_back),
//  onPressed: () {
//  Navigator.of(context).push(
//  new MaterialPageRoute(builder: (context) => new LoginPage()));
//  },
//  );
//  }),
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        brightness: Brightness.dark,
        elevation: 0,
        iconTheme: IconThemeData(color: Colors.black, opacity: 0.5, size: 30),
        title: new Text(
          '注册',
          style: new TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.transparent,
      ),
      body: new EditTextWidget(),
    );
  }
}

class EditTextWidget extends StatefulWidget {
  @override
  State<EditTextWidget> createState() => EditTextWidgetState();
}

class EditTextWidgetState extends State<EditTextWidget> {
  final TextEditingController _getPhoneNum = new TextEditingController();
  final TextEditingController _getPassWord = new TextEditingController();
  bool _isObscure = true;
  String imagePath = 'assets/images/icon_eye_close.png';
  String phoneTitle= '+86';

  @override
  Widget build(BuildContext context) {
    Widget PhoneTitleWidget = new Container(
      margin: const EdgeInsets.fromLTRB(16.0, 16.0, 32.0, 16.0),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
//          new GestureDetector(
//
//          ),
          new Expanded(
            flex: 4,
            child: new Padding(
              padding: EdgeInsets.fromLTRB(16, 0, 32.0, 0),
              child: new Text(
                '地区',
                style: new TextStyle(color: Colors.black, fontSize: 18.0),
              ),
            ),
          ),

          new Expanded(
            flex:1,
            child: new Align(
              alignment: Alignment.centerRight,
              child: new Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      showModalBottomSheet(
                          context: context,
                          builder: (BuildContext context) {
                            return new Container(
                              color: Color(0xff8c000000),
                              child: new Column(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  new Container(
                                    width: 350.0,
                                    child: //香港
                                        new RaisedButton(
                                          padding: new EdgeInsets.all(10.0),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(10.0),
                                          topLeft: Radius.circular(10.0),
                                          bottomRight: Radius.circular(0),
                                          bottomLeft: Radius.circular(0),
                                        ),
                                      ),
                                      elevation: 0,
                                      //按钮下面的阴影
                                      highlightElevation: 0,
                                      //高亮时候的阴影
                                      color: Colors.white,
                                      child: new Text(
                                        '中国香港 +852',
                                        style: new TextStyle(
                                            color: Colors.black,
                                            fontSize: 18.0),
                                      ),
                                      onPressed: () {
                                            setState(() {
                                              phoneTitle = '+852';
                                            });
                                            Navigator.of(context).pop();
                                      },
                                    ),
                                  ),
                              
                                  //中间的线

                                  //澳门
                                  new Container(
                                    width: 350.0,
                                    child: new RaisedButton(
                                      padding: new EdgeInsets.all(10.0),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(0),
                                          topLeft: Radius.circular(0),
                                          bottomRight: Radius.circular(10.0),
                                          bottomLeft: Radius.circular(10.0),
                                        ),
                                      ),
                                      elevation: 0,
//                            按钮下面的阴影
                                      highlightElevation: 0,
//                            高亮时候的阴影
                                      color: Colors.white,
                                      child: new Text(
                                        '中国澳门 +853',
                                        style: new TextStyle(
                                            color: Colors.black,
                                            fontSize: 18.0),
                                      ),
                                      onPressed: () {
                                        setState(() {
                                          phoneTitle =  '+853';

                                        });
                                        Navigator.of(context).pop();
                                      },
                                    ),
                                  ),

                                  //取消
                                  new Container(
                                    width: 350.0,
                                    margin:
                                        const EdgeInsets.fromLTRB(0, 16, 0, 16),
                                    child: new RaisedButton(
                                      padding: new EdgeInsets.all(10.0),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(10.0),
                                          topLeft: Radius.circular(10.0),
                                          bottomRight: Radius.circular(10.0),
                                          bottomLeft: Radius.circular(10.0),
                                        ),
                                      ),
                                      elevation: 0,
                                      //按钮下面的阴影
                                      highlightElevation: 0,
                                      //高亮时候的阴影
                                      color: Colors.white,
                                      child: new Text(
                                        '取消',
                                        style: new TextStyle(
                                            color: Colors.black,
                                            fontSize: 18.0),
                                      ),
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      },
                                    ),
                                  ),
                                ],
                              ),
                            );
                          });
                    },

                    child: Text(
                      phoneTitle,
                      style: new TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                      ),
                    ),
                  ),
                  new Image.asset(
                    'assets/images/icon_right_row.png',
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

    //注册静态提示文字
    Widget TipsWidget = new Container(
      margin: const EdgeInsets.fromLTRB(0, 16.0, 0, 0),
      child: new RichText(
        text: new TextSpan(
          text: '已阅读并同意',
          style: new TextStyle(color: Colors.black, fontSize: 14.0),
          children: <TextSpan>[
            new TextSpan(
              text: '用户协议',
              style: new TextStyle(color: Color(0xFF0AD0B2), fontSize: 14.0),
            ),
          ],
        ),
      ),
    );
    //手机号输入框
    //margin，左，上，右，下，某些不支持padding要在外面套一层new Padding（）
    //new Divider()横线
    Widget PhoneNumWidget = new Container(
      margin: const EdgeInsets.fromLTRB(16.0, 16.0, 32.0, 16.0),
      child: new Column(
        children: <Widget>[
          new Row(
            children: <Widget>[
              new Padding(
                padding: EdgeInsets.fromLTRB(16, 0, 16.0, 0),
                child: new Text(
                  '手机号',
                  style: new TextStyle(color: Colors.black, fontSize: 16.0),
                ),
              ),
              new Expanded(
                child: new TextField(
                  cursorColor: Color(0xFF0AD0B2),
                  keyboardType: TextInputType.number,
                  controller: _getPhoneNum,
                  decoration: new InputDecoration(
                    hintText: '请输入注册手机号',
                    hintStyle:
                        new TextStyle(fontSize: 14.0, color: Colors.black26),
                    border: InputBorder.none,
                  ),
                ),
              ),
            ],
          ),
          new Padding(
            padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
            child: new Divider(),
          ),
        ],
      ),
    );

    //密码框
    //obscureText是否显示圆点
    Widget PassWordWidget = new Container(
      margin: const EdgeInsets.fromLTRB(16.0, 0, 32.0, 16.0),
      child: new Column(
        children: <Widget>[
          new Row(
            children: <Widget>[
              new Padding(
                padding: EdgeInsets.fromLTRB(16, 0, 32.0, 0),
                child: new Text(
                  '密码',
                  style: new TextStyle(color: Colors.black, fontSize: 16.0),
                ),
              ),
              new Expanded(
                child: new TextField(
                  cursorColor: Color(0xFF0AD0B2),
                  obscureText: _isObscure,
                  controller: _getPassWord,
                  decoration: new InputDecoration(
                    suffixIcon: IconButton(
                        icon: ImageIcon(
                          AssetImage(imagePath),
                          size: 16.0,
                          color: Colors.grey,
                        ),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                            imagePath = _isObscure
                                ? 'assets/images/icon_eye_close.png'
                                : 'assets/images/icon_eye_close.png';
                          });
                        }),
                    hintText: '请输入六位数密码',
                    hintStyle:
                        new TextStyle(fontSize: 14.0, color: Colors.black26),
                    border: InputBorder.none,
                  ),
                ),
              ),
            ],
          ),
          new Padding(
            padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
            child: new Divider(),
          ),
        ],
      ),
    );

    //登录按钮
    //shape设置边框样式
    Widget loginButton(BuildContext context) {
      return new Container(
        width: 400.0,
        padding: EdgeInsets.fromLTRB(30.0, 15.0, 30.0, 0.0),
        child: new RaisedButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(80.0),
              topLeft: Radius.circular(80.0),
              bottomRight: Radius.circular(80.0),
              bottomLeft: Radius.circular(80.0),
            ),
          ),
          elevation: 4.0,
          //按钮下面的阴影
          highlightElevation: 8.0,
          //高亮时候的阴影
          color: Color(0xFFcdcdcd),
          child: new Padding(
            padding: EdgeInsets.all(12.0),
            child: new Text(
              "注册",
              style: new TextStyle(color: Colors.white, fontSize: 16.0),
            ),
          ),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              // 跳转选择男女界面
              return SexWidget();
            }));
          },
        ),
      );
    }

    //组合
    return new ListView(
      children: <Widget>[
        new Column(
          children: <Widget>[
            PhoneTitleWidget,
            PhoneNumWidget,
            PassWordWidget,
            loginButton(context),
            TipsWidget,
          ],
        )
      ],
    );
  }
}
